<template>
  <div class="custom-plan">
    <header class="header">
      <TitleName name="定制计划/巡检计划" />
      <el-form
        :inline="true"
        :model="formData"
        size="large"
        class="demo-form-inline"
      >
        <el-form-item label="设备名称:">
          <el-select
            class="one-sel"
            v-model="formData.region"
            placeholder="请选择设备名称"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划名称:">
          <el-input
            class="one-ipt"
            v-model="formData.name"
            placeholder="请输入"
            clearable
          />
        </el-form-item>

        <el-form-item label="巡视类别:">
          <el-select
            class="two-sel"
            v-model="formData.region"
            placeholder="请选择巡视类别"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>

        <el-form-item label="巡视周期:">
          <el-select
            class="two-sel"
            v-model="formData.region"
            placeholder="请选择巡视周期:"
            clearable
          >
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button class="search" type="primary" @click="search"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
      <div class="btn-wrap">
        <button class="enactment" @click="enactPlan">制定计划</button>
        <button class="update" @click="updatePlan">修改计划</button>
        <button class="del" @click="delPlan">删除计划</button>
        <button class="search" @click="searchPlan">查询计划</button>
      </div>
    </header>
    <div class="table-wrap">
      <el-table
        :data="tableData"
        border
        max-height="470"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" />
        <el-table-column align="center" property="name" label="公司名称" />
        <el-table-column align="center" property="name" label="设备名称" />
        <el-table-column align="center" property="address" label="计划任务" />
        <el-table-column align="center" property="address" label="计划名称" />
        <el-table-column align="center" property="address" label="巡视类别" />
        <el-table-column align="center" property="address" label="巡检频率" />
        <el-table-column align="center" property="address" label="巡检日期" />
        <el-table-column align="center" property="address" label="有效日期" />
        <el-table-column align="center" property="address" label="执行组别" />
        <el-table-column align="center" property="address" label="巡检内容" />
        <el-table-column align="center" property="address" label="创建日期" />
      </el-table>
      <div style="padding-top: 15px">
        <Pagination
          @getDataList="getDataList"
          :pageSize="pageSize"
          :total="total"
          :currentPage="currentPage"
        />
      </div>
    </div>
    <!-- 删除计划 -->
    <Dialog
      class="delDia"
      v-model:visible="delDiaVisible"
      top="20vh"
      width="35%"
      title="确认"
    >
      <template #content>
        <div class="content">确定要删除吗？</div>
      </template>
      <template #footer>
        <div class="footer">
          <button @click="cancel" class="cancel">取消</button>
          <button @click="submit" class="submit">确定</button>
        </div>
      </template>
    </Dialog>
    <!-- 制定计划 -->
    <EnactPlanDia
      v-model:visible="enactDiaVisible"
      @enactSure="enactSure"
      v-model:enacForm="enacForm"
    />
  </div>
</template>
<script setup lang="ts">
import TitleName from "../../components/TitleName.vue";
import EnactPlanDia from "./component/EnactPlan";
import { ref, reactive, onMounted } from "vue";
let formData = reactive({ name: "", region: "", date: "" });
let pageSize = ref(""); //每页数
let enacForm = reactive({}); //制定计划弹框收集
let total = ref(110); // 总数
let delDiaVisible = ref(false); //弹框删除
let enactDiaVisible = ref(false); //制定计划弹框显示
let currentPage = ref("currentPage"); //当前页
let tableData = reactive([
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
  { name: "sf", address: "fdsfsd" },
]);
const enactPlan = () => {
  enactDiaVisible.value = true;
}; //制定计划
//del弹框中的取消
const cancel = () => {
  delDiaVisible.value = false;
};
//制定计划确定框
const enactSure = () => {
  console.log(enacForm, "enacForm");
};
//del弹框中的提交
const submit = () => {};
//del弹框 打开
const delPlan = () => {
  delDiaVisible.value = true;
};
//查询计划
const searchPlan = () => {};
//修改计划
const updatePlan = () => {};
//获取列表
const getDataList = () => {};
const handleSelectionChange = () => {};
//查询
const search = () => {};
//制定计划弹框 取消
const enactCancel = () => {};
//制定计划弹框 确定
const enactSubmit = () => {};
</script>
<style scoped lang="scss">
.custom-plan {
  height: 100%;
  padding: 15px 17px 17px 12px;
  /* box-sizing: border-box; */
  .header {
    :deep(.el-form) {
      margin-top: 31px;
      padding-left: 20px;
    }
    .one-sel {
      width: 337px;
    }
    .one-ipt {
      width: 255px;
    }
    .two-sel {
      width: 198px;
    }
    :deep(.el-form-item__label) {
      font-size: 20px;
      font-weight: 400;
      color: #333333;
      /* margin-top: 3px; */
    }
    :deep(.el-form .el-input__wrapper) {
      box-shadow: none;
    }
    .one-sel,
    .one-ipt,
    .two-sel {
      box-shadow: none !important;

      border: 1px solid #e1e0e0 !important;
      background: #ffffff;
      height: 42px;
      border-radius: 5px;
    }
    .search {
      background: #0250f9;
      border-radius: 5px;
      width: 100px;
      height: 42px;
      font-weight: 400;
      font-size: 22px;
      color: #ffffff;
    }
    height: 197px;
    background: #ffffff;
    padding-top: 26px;
    width: calc(100vw - 175px);
    box-sizing: border-box;
    .btn-wrap {
      padding-left: 44px;
      button {
        width: 125px;
        height: 42px;
        border-radius: 5px;
        font-size: 22px;
        font-weight: 400;
        color: #ffffff;
        cursor: pointer;
        margin-left: 19px;

        border: none;
      }

      & button:first-child {
        margin-left: 0;
      }

      .search {
        background: #f4b400;
      }
      .del {
        background: #d73d32;
      }
      .update {
        background: #07bd2a;
      }
      .enactment {
        background: #0250f9;
      }
    }
  }
  .table-wrap {
    margin-top: 15px;
    width: calc(100vw - 175px);
    height: calc(100vh - 17px - 227px - 116px);
    box-sizing: border-box;
    background-color: #fff;
    padding: 20px 16px 0 18px;
    :deep(.el-table__body td.el-table__cell) {
      height: 4.56vh;
    }
  }
}

.delDia {
  .content {
    font-size: 36px;
    font-weight: 500;
    color: #333333;
    text-align: center;
    margin-top: 50px;
    line-height: 190px;
  }
  .footer {
    display: flex;
    justify-content: center;
    margin-top: 60px;
    padding-bottom: 50px;
    button {
      width: 109px;
      height: 51px;
      border-radius: 5px;
      font-size: 24px;
      font-weight: 500;
      color: #ffffff;
    }
    .cancel {
      background: #d73d32;
    }
    .submit {
      margin-left: 25px;
      background: #0250f9;
    }
  }
}
</style>
